import { onMounted, onUnmounted, ref } from 'vue';
import { throttle } from 'underscore'

export default function useScroll(elRef) {
    let el = window

    const isReachBottom = ref(false)
    const clientHeight = ref(0)
    const scrollTop = ref(0)
    const scrollHeight = ref(0)
    // 使用节流
    const scrollListenerHandler = throttle(() => {
        if (el === window) {
            clientHeight.value = document.documentElement.clientHeight
            scrollTop.value = document.documentElement.scrollTop
            scrollHeight.value = document.documentElement.scrollHeight
        } else {
            clientHeight.value = el.clientHeight
            scrollTop.value = el.scrollTop
            scrollHeight.value = el.scrollHeight
        }

        if (scrollHeight.value <= scrollTop.value + clientHeight.value) {
            // homeStore.fetchHouseListDate()
            // if(reachBottomCB) reachBottomCB()
            isReachBottom.value = true
        }
    }, 100)

    onMounted(() => {
        if (elRef) el = elRef.value
        el.addEventListener("scroll", scrollListenerHandler)
    })

    // 监听离开
    onUnmounted(() => {
        el.removeEventListener("scroll", scrollListenerHandler)
    })

    return { isReachBottom, clientHeight, scrollTop, scrollHeight }
}
